<template>
  <div class="max-box">
    <van-nav-bar placeholder fixed border title="歌手音乐列表" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="img-box">
      <img class="img" src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
      <div class="mask"></div>
    </div>
    <Songs @toggleList="getSongList" :songList="songs"></Songs>
    <!-- 歌曲列表 -->
    <!-- <div>
         <song-item :songList="songs"></song-item>
      </div> -->
  </div>
</template>

<script  type='module'>

import Songs from './components/songs'
// import SongItem from './components/sheetItem'
export default {
  name: 'SingDetail',
  props: [
    'SingerId'
  ],
  components: {
    Songs
    // SongItem
  },
  data () {
    return {
      songs: [],
      keyword: ''
    }
  },
  methods: {
    async getSongList (index) {
      this.songs = []
      if (index === 1) {
        this.keyword = 'hot'
      } else {
        this.keyword = 'time'
      }
      const { data: res } = await this.$http.get(`/artist/songs?id=${this.SingerId}&order=${this.keyword}&limit=50 `)
      console.log(res)
      for (const item of res.songs) {
        this.songs.push({
          mv: item.mv,
          songName: item.name,
          id: item.id,
          singer: item.ar,
          zhuanji: item.al.name,
          yuanc: item.alia
        })
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  created () {
    this.getSongList()
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.max-box {
  .img-box {
    position: relative;
    width: 100%;
    height: 60vw;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
    }
    .mask {
      width: 100%;
      height: 60vw;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
    }
  }
}
</style>
